/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react/jsx-no-duplicate-props */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable import/no-named-as-default-member */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable no-alert */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable array-callback-return */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable no-restricted-syntax */
/* eslint-disable import/order */
import React, { forwardRef } from 'react';
import {
  HashRouter as Router,
  Routes,
  Route,
  useLocation,
  Navigate,
} from 'react-router-dom';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Login from './pages/login';
import Home from './pages/home';
import SignUp from './pages/signup';
import Snackbar from '@mui/material/Snackbar';
import store from './store';
import MuiAlert from '@mui/material/Alert';
import Slide from '@mui/material/Slide';
import { CloseOutlined } from '@ant-design/icons';
import { change } from './store/snackbar';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { green, purple, red, blue } from '@mui/material/colors';
import './App.css';

function TransitionLeft(props) {
  return <Slide {...props} direction="left" />;
}

function TransitionUp(props) {
  return <Slide {...props} direction="up" />;
}

function TransitionRight(props) {
  return <Slide {...props} direction="right" />;
}

function TransitionDown(props) {
  return <Slide {...props} direction="down" />;
}

const Alert = forwardRef(function Alert(props, ref) {
  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});

const theme = createTheme({
  palette: {
    primary: {
      main: '#FFFFFF',
    },
    secondary: {
      main: red[500],
    },
    text: {
      primary: '#999999',
      secondary: '#c0c0c0',
    },
  },
});

const Base = () => {
  const snackbar = useSelector((state) => state.snackbar.value);
  const dispatch = useDispatch();
  return (
    <div>
      <Router>
        <Routes>
          {/* <Route path="login/" element={<Login />} />
          <Route path="signup" element={<SignUp />} /> */}
          <Route path="*" element={<Navigate to="/home" />} />
          <Route path="home/*" element={<Home />} />
        </Routes>
      </Router>
      <Snackbar
        {...snackbar}
        TransitionComponent={TransitionDown}
        autoHideDuration={3000}
        onClose={() => {
          dispatch(
            change({
              open: false,
            })
          );
          snackbar?.handleClose?.();
        }}
      >
        <Alert
          onClose={snackbar?.handleClose}
          severity={snackbar?.severity}
          sx={{ width: '100%' }}
          onClose={() => {
            dispatch(
              change({
                open: false,
              })
            );
          }}
        >
          {snackbar?.message}
        </Alert>
      </Snackbar>
    </div>
  );
};

export default function App() {
  return (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <Base />
      </ThemeProvider>
    </Provider>
  );
}
